<template>
  <div class="container">
    <div class="aside">

    </div>

    <div class="content">

      <div class="header">
        <button @click="show()">show</button>
        <button @click="hide()">hide</button>
      </div>
      <div class="main" ref="main">
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from "vue";
import { useLoading } from "./hooks/loading"

let main = ref()
const { show, hide } = useLoading();

onMounted(() => {
})

</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;

}

.aside {
  min-width: 300px;
  widows: 300px;
  height: 100%;
  background-color: cadetblue;

}

.content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 80px;
  min-height: 80px;
  background-color: brown;
}

.main {
  flex: 1;
  width: 100%;
  background-color: burlywood;
}
</style>